<template>
    <div class=''>
        {{ name[0] }} MyRef ---- {{ myRef[0] }}
    </div>
    <div class="useCss">d5asd1a53d15ad</div>
    <div>
        shallowVal ---- {{ shallowVal.name }}
    </div>
    <div ref='dom'> 我是dom</div>
    <div @click="btn">点击修改ref数据</div>
    <div @click="btn1">点击修改shallowVal</div>
</template>

<script lang='ts' setup>

import { ref, isRef, shallowRef, triggerRef, customRef } from 'vue';
// 引入vue自带接口
import type { Ref } from 'vue'

interface M {
    name: string
}
let dom = ref<HTMLDivElement>()
// Partial变成可选
let name: Ref<Array<Partial<M>>> = ref([{ name: '4444' }, { name: '4444' }])
// 自定义Ref
function MyRef<T>(value: T) {
    return customRef((track, triggerRef) => {
        return {
            get() {
                track()
                return value
            },
            set(newVal) {
                value = newVal
                triggerRef()
            }
        }
    })
}
// 自定义Ref  定义Ref
const myRef = MyRef<Array<M>>([{ name: 'myRef' }, { name: '4444' }])

const btn = () => {
    // isRef判断是不是Ref
    console.log('===>', isRef(name));
    name.value[0].name = '888888'
    myRef.value[0].name = '------我是自定义Ref'
    console.log('===>', dom.value);
}

// shallowRef 是浅层次的收集依赖
const shallowVal = shallowRef<any>({ name: '少华' })
const btn1 = () => {
    console.log('===>', 222);
    // 直接修改shallowRef里面的值不会改变 
    shallowVal.value.name = 1111
    // 强制修改刷新页面
    triggerRef(shallowVal)
}

</script>

<style scoped lang='less'></style> 